<template>
  <div>
    <h3>倒计时组件</h3>
    <CountDown v-slot="timeObj" :time="60">
      <div class="count-down">
        <div class="icon"></div>
        {{ timeObj.d }}天{{ timeObj.hh }}小时{{ timeObj.mm }}分钟{{
          timeObj.ss
        }}秒
      </div>
    </CountDown>
    <h3>具有校验功能的表单组件</h3>
    <div>
      <i-form ref="form" :model="formValidate" :rules="ruleValidate">
        <i-form-item label="用户名" prop="name">
          <i-input v-model="formValidate.name"></i-input>
        </i-form-item>
        <i-form-item label="邮箱" prop="mail">
          <i-input v-model="formValidate.mail"></i-input>
        </i-form-item>
      </i-form>
      <button @click="handleSubmit">提交</button>
      <button @click="handleReset">重置</button>
    </div>
    <h3>单个checkbox组件</h3>
    <div>
      <i-checkbox v-model="val" @on-change="change"></i-checkbox>
    </div>
    <h3>checkboxGroup组件</h3>
    <div>
      <i-checkbox-group v-model="checkList" @on-change="groupChange">
        <i-checkbox label="1111">选项一</i-checkbox>
        <i-checkbox label="2222">选项二</i-checkbox>
        <i-checkbox label="3333">选项三</i-checkbox>
      </i-checkbox-group>
    </div>
    <h3>radio组件 - 单一选择</h3>
    <div>
      <i-radio v-model="val" @on-change="radioSingleChange">鼠年大吉</i-radio>
    </div>
    <h3>radio组件 - 组合使用</h3>
    <div>
      <i-radio-group v-model="radioGroup" @on-change="radioBoxChange">
        <i-radio label="1111">选项一</i-radio>
        <i-radio label="2222">选项二</i-radio>
        <i-radio label="3333">选项三</i-radio>
      </i-radio-group>
    </div>
    <h3>display - 动态渲染组件</h3>
    <button @click="$router.push('/display')">点击跳转查看效果</button>
    <h3>alert - 全局提示框组件</h3>
    <button @click="getAlert">激活提示</button>
  </div>
</template>

<script>
  // 倒计时
  import CountDown from '../../components/CountDown/index'
  // Form表单
  import iForm from '../../components/Form/form'
  import iFormItem from '../../components/Form/form-item'
  import iInput from '../../components/Input/index'
  // checkbox组件
  import iCheckbox from '../../components/Checkbox/checkbox.vue'
  import iCheckboxGroup from '../../components/Checkbox/checkbox-group.vue'
  // radio 组件
  import iRadio from '../../components/Radio/radio.vue'
  import iRadioGroup from '../../components/Radio/radio-group.vue'

  export default {
    components: {
      CountDown, iForm, iFormItem, iInput, iCheckbox, iCheckboxGroup, iRadio, iRadioGroup
    },
    props: {},
    data() {
      return {
        // 校验功能组件
        formValidate: {
          name: '',
          mail: ''
        },
        ruleValidate: {
          name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ]
        },
        // checkbox
        val: false,
        checkList: [],
        // radio
        radioGroup: ''
      }
    },
    methods: {
      // Form表单
      // 校验
      handleSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log('提交成功')
          } else {
            console.log('表单校验失败')
          }
        })
      },
      // 重置
      handleReset () {
        this.$refs.form.resetFields()
      },
      // checkbox
      change(data) {
        console.log('单独使用的check')
        console.log(data)
      },
      groupChange(data) {
        console.log('组合使用的check')
        console.log(data)
        console.log(this.checkList)
      },
      // radio
      radioSingleChange(data) {
        console.log('单独使用的radio')
        console.log(data)
      },
      radioBoxChange(data) {
        console.log('组合使用的radio')
        console.log(data)
      },
      // Alert组件
      getAlert() {
        this.$Alert.info({ content: '激活提示成功，默认1.5s后消失' })
      }
    }
  }
</script>
<style lang="scss" scoped></style>
